<template>
  <view class="filter-container">
    <!-- 主筛选区 - 顶部标签式 -->
    <view class="main-filters">
      <view class="filter-tabs">
        <view 
          v-for="filter in mainFilters"
          :key="filter.value"
          :class="['filter-tab', { active: activeFilter === filter.value }]"
          @click="applyQuickFilter(filter.value)"
        >
          <view class="tab-icon">{{ filter.icon }}</view>
          <text class="tab-label">{{ filter.label }}</text>
        </view>
      </view>
    </view>
    
    <!-- 次级筛选 - 水平滚动 -->
    <scroll-view class="sub-filters" scroll-x enable-flex>
      <view class="sub-filter-list">
        <view 
          v-for="filter in subFilters"
          :key="filter.value"
          :class="['sub-filter-chip', { active: activeSubFilter === filter.value }]"
          @click="applySubFilter(filter.value)"
        >
          {{ filter.label }}
        </view>
      </view>
    </scroll-view>
    
    <!-- 展开的高级筛选 - 仅保留评估类型 -->
    <view class="advanced-panel" v-if="showAdvanced">
      <view class="advanced-group">
        <text class="group-title">评估类型</text>
        <view class="radio-buttons">
          <view 
            v-for="(type, index) in assessmentTypes"
            :key="index"
            :class="['radio-btn', { active: assessmentTypeIndex === index }]"
            @click="selectAssessmentType(index)"
          >
            {{ type }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 展开/收起按钮 -->
    <view class="expand-btn" @click="toggleAdvanced">
      <text class="expand-text">{{ showAdvanced ? '收起' : '更多筛选' }}</text>
      <text class="expand-icon">{{ showAdvanced ? '▲' : '▼' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AssessmentFilter',
  data() {
    return {
      showAdvanced: false,
      activeFilter: 'all',
      activeSubFilter: 'all_time',
      timeRangeIndex: 0,
      assessmentTypeIndex: 0,
      
      // 主筛选选项（带图标）
      mainFilters: [
        { value: 'all', label: '全部', icon: '📋' },
        { value: 'hamd', label: '抑郁', icon: '😔' },
        { value: 'hama', label: '焦虑', icon: '😰' },
        { value: 'ymrs', label: '躁狂', icon: '😤' }
      ],
      
      // 次级筛选（时间）
      subFilters: [
        { value: 'all_time', label: '全部时间' },
        { value: 'week', label: '最近一周' },
        { value: 'month', label: '最近一月' },
        { value: 'quarter', label: '最近三月' }
      ],
      
      timeRanges: ['全部时间', '最近一周', '最近一月', '最近三月'],
      assessmentTypes: ['全部评估', '医生评估', '患者自评']
    }
  },
  
  methods: {
    // 应用主筛选
    applyQuickFilter(filterValue) {
      this.activeFilter = filterValue;
      this.$emit('filter-change', this.getFilterParams());
    },
    
    // 应用次级筛选
    applySubFilter(filterValue) {
      this.activeSubFilter = filterValue;
      
      // 同步时间范围索引
      const timeMap = {
        'all_time': 0,
        'week': 1,
        'month': 2,
        'quarter': 3
      };
      this.timeRangeIndex = timeMap[filterValue] || 0;
      
      this.$emit('filter-change', this.getFilterParams());
    },
    
    // 选择时间范围
    selectTimeRange(index) {
      this.timeRangeIndex = index;
      
      // 同步次级筛选状态
      const filterMap = ['all_time', 'week', 'month', 'quarter'];
      this.activeSubFilter = filterMap[index];
      
      this.$emit('filter-change', this.getFilterParams());
    },
    
    // 选择评估类型
    selectAssessmentType(index) {
      this.assessmentTypeIndex = index;
      this.$emit('filter-change', this.getFilterParams());
    },
    
    // 切换高级筛选
    toggleAdvanced() {
      this.showAdvanced = !this.showAdvanced;
    },
    
    // 获取筛选参数
    getFilterParams() {
      return {
        scale_type: this.activeFilter,
        time_range: this.activeSubFilter,
        assessment_type: this.assessmentTypeIndex === 0 ? 'all' : (this.assessmentTypeIndex === 1 ? 'doctor' : 'self')
      };
    },
    
    // 重置筛选条件
    resetFilters() {
      this.activeFilter = 'all';
      this.activeSubFilter = 'all_time';
      this.timeRangeIndex = 0;
      this.assessmentTypeIndex = 0;
      this.$emit('filter-change', this.getFilterParams());
    }
  }
}
</script>

<style scoped>
.filter-container {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

/* 主筛选区域 */
.main-filters {
  padding: 20rpx;
  background: #fff;
  border-bottom: 2rpx solid #f0f2f5;
}

.filter-tabs {
  display: flex;
  justify-content: space-around;
  gap: 10rpx;
}

.filter-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 10rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.filter-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #2db5a3 0%, #26c6a0 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-tab.active::before {
  opacity: 1;
}

.filter-tab.active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 20rpx rgba(45, 181, 163, 0.3);
}

.tab-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.filter-tab.active .tab-icon {
  transform: scale(1.1);
}

.tab-label {
  font-size: 24rpx;
  color: #495057;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.filter-tab.active .tab-label {
  color: #fff;
  font-weight: 600;
}

/* 次级筛选区域 - 水平滚动 */
.sub-filters {
  background: #fafbfc;
  padding: 15rpx 0;
  white-space: nowrap;
}

.sub-filter-list {
  display: inline-flex;
  padding: 0 20rpx;
  gap: 12rpx;
}

.sub-filter-chip {
  display: inline-block;
  padding: 12rpx 24rpx;
  background: #fff;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #6c757d;
  border: 2rpx solid #dee2e6;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.sub-filter-chip.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.sub-filter-chip:active {
  transform: scale(0.95);
}

/* 高级筛选面板 */
.advanced-panel {
  padding: 25rpx;
  background: #fff;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 2rpx solid #f0f2f5;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    max-height: 500rpx;
    transform: translateY(0);
  }
}

.advanced-group {
  margin-bottom: 25rpx;
}

.advanced-group:last-child {
  margin-bottom: 0;
}

.group-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #495057;
  margin-bottom: 15rpx;
  display: block;
  padding-left: 8rpx;
  border-left: 4rpx solid #2db5a3;
}

.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.radio-btn {
  flex: 1;
  min-width: 140rpx;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #6c757d;
  text-align: center;
  border: 2rpx solid #dee2e6;
  transition: all 0.3s ease;
}

.radio-btn.active {
  background: linear-gradient(135deg, #ff7a45 0%, #ff9a56 100%);
  color: #fff;
  border-color: #ff7a45;
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(255, 122, 69, 0.3);
  font-weight: 600;
}

.radio-btn:active {
  transform: scale(0.96);
}

/* 展开/收起按钮 */
.expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 2rpx solid #dee2e6;
  gap: 8rpx;
  transition: all 0.3s ease;
}

.expand-btn:active {
  background: #e9ecef;
}

.expand-text {
  font-size: 24rpx;
  color: #6c757d;
  font-weight: 500;
}

.expand-icon {
  font-size: 20rpx;
  color: #adb5bd;
  transition: transform 0.3s ease;
}
</style>
